import { FC, useState } from 'react';
import { Card, Tabs, Button, Space } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import ChartConfig from './ChartConfig';
import TableConfig from './TableConfig';
import type { ChartConfig as ChartConfigType, TableConfig as TableConfigType } from '../../../types/report';
import styles from './DataPanel.module.css';

const { TabPane } = Tabs;

interface DataPanelProps {
  value?: {
    charts?: ChartConfigType[];
    tables?: TableConfigType[];
  };
  onChange?: (value: any) => void;
}

const DataPanel: FC<DataPanelProps> = ({
  value = { charts: [], tables: [] },
  onChange
}) => {
  const [activeKey, setActiveKey] = useState('charts');

  const handleAddChart = () => {
    const newChart: ChartConfigType = {
      id: Date.now().toString(),
      type: 'line',
      title: '新图表',
      data: []
    };
    onChange?.({
      ...value,
      charts: [...(value.charts || []), newChart]
    });
  };

  const handleAddTable = () => {
    const newTable: TableConfigType = {
      id: Date.now().toString(),
      title: '新表格',
      columns: [],
      data: []
    };
    onChange?.({
      ...value,
      tables: [...(value.tables || []), newTable]
    });
  };

  return (
    <Card className={styles.panel}>
      <Tabs
        activeKey={activeKey}
        onChange={setActiveKey}
        tabBarExtraContent={
          <Button
            type="primary"
            icon={<PlusOutlined />}
            onClick={activeKey === 'charts' ? handleAddChart : handleAddTable}
          >
            添加{activeKey === 'charts' ? '图表' : '表格'}
          </Button>
        }
      >
        <TabPane tab="图表" key="charts">
          <Space direction="vertical" style={{ width: '100%' }}>
            {value.charts?.map(chart => (
              <ChartConfig
                key={chart.id}
                value={chart}
                onChange={newChart => {
                  const charts = value.charts?.map(c =>
                    c.id === chart.id ? newChart : c
                  );
                  onChange?.({ ...value, charts });
                }}
                onDelete={() => {
                  const charts = value.charts?.filter(c => c.id !== chart.id);
                  onChange?.({ ...value, charts });
                }}
              />
            ))}
          </Space>
        </TabPane>
        <TabPane tab="表格" key="tables">
          <Space direction="vertical" style={{ width: '100%' }}>
            {value.tables?.map(table => (
              <TableConfig
                key={table.id}
                value={table}
                onChange={newTable => {
                  const tables = value.tables?.map(t =>
                    t.id === table.id ? newTable : t
                  );
                  onChange?.({ ...value, tables });
                }}
                onDelete={() => {
                  const tables = value.tables?.filter(t => t.id !== table.id);
                  onChange?.({ ...value, tables });
                }}
              />
            ))}
          </Space>
        </TabPane>
      </Tabs>
    </Card>
  );
};

export default DataPanel; 